<style lang="scss">
.line {
  width: 40%;
  display: flex;
  justify-content: space-around;
  li {
    width: 7rem;
    height: 30px;
    border: 1px solid #f36279;

    text-align: center;
    line-height: 30px;
    // margin-left:5px;
    margin-top: 5px;
  }
}
.active {
  color: #fde9ed;
  background: #f36279;
}

.box {
  width: 100%;
  height: 13rem;
  // background: red;
  margin-top: 20px;
  .topbox {
    width: 90%;
    height: 4rem;
    background: #f36279;
    color: #ffffff;
    .left-column {
      flex: 0.7;
      margin-left: 10px;
    }
    .right-column {
      flex: -0.4;
    }
    p {
      color: #ffffff;
      margin-top: 15px;
    }
  }
  .History {
    width: 90%;
    // padding-bottom: 30px;
    margin-top: 20px;
    background: #fff4f6;
    color: #f58395;
    display: flex;
    border: 1px solid #fde9ed;
    .left-column {
      line-height: 50px;
      flex: 1;
      margin-left: 5px;
    }

    .right-column {
      line-height: 50px;
      flex: 0.8;
    }
  }
}
</style>
<template>
  <van-nav-bar
    title="生长曲线"
    left-arrow
    @click-left="onClickLeft"
    van-nav-bar-icon-color="black"
  />
  <div class="line">
    <li
      v-for="(item, index) in list"
      :key="index"
      :class="{ active: index === currentStep }"
      @click="onChange(index)"
    >
      {{ item.title }}
    </li>
  </div>
  <div v-if="currentStep == 0">
    <van-tabs v-model:active="active">
      <van-tab title="0-1岁">
        <div>
          <Chartsfor1_2yearsold></Chartsfor1_2yearsold>
          <div class="box">
            <div class="topbox">
              <div style="display: flex">
                <li class="left-column">9天</li>
                <li class="right-column">标准身高:47.6cm~54.8cm</li>
              </div>
              <p style="margin-left: 10px">身高偏矮:注意补充营养</p>
            </div>
            <div class="History">
              <li class="left-column">历史记录</li>
              <li class="right-column">了解宝宝身体情况 &emsp13;></li>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="1-3岁">
        <zerooneyearoldchart></zerooneyearoldchart>
        <div class="box">
          <div class="topbox">
            <div style="display: flex">
              <li class="left-column">9天</li>
              <li class="right-column">标准身高:47.6cm~54.8cm</li>
            </div>
            <p style="margin-left: 10px">身高偏矮:注意补充营养</p>
          </div>
          <div class="History">
            <li class="left-column">历史记录</li>
            <li class="right-column">了解宝宝身体情况 &emsp13;></li>
          </div>
        </div>
      </van-tab>
      <van-tab title="3-7岁">
        <theresevenyearoldchart></theresevenyearoldchart>
        <div class="box">
          <div class="topbox">
            <div style="display: flex">
              <li class="left-column">9天</li>
              <li class="right-column">标准身高:47.6cm~54.8cm</li>
            </div>
            <p style="margin-left: 10px">身高偏矮:注意补充营养</p>
          </div>
          <div class="History">
            <li class="left-column">历史记录</li>
            <li class="right-column">了解宝宝身体情况 &emsp13;></li>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <div v-if="currentStep == 1">
    <van-tabs v-model:active="active">
      <van-tab title="0-1岁">
        <div>
          <Chartsfor1_2yearsold></Chartsfor1_2yearsold>
          <div class="box">
            <div class="topbox">
              <div style="display: flex">
                <li class="left-column">9天</li>
                <li class="right-column">标准身高:47.6cm~54.8cm</li>
              </div>
              <p style="margin-left: 10px">身高偏矮:注意补充营养</p>
            </div>
            <div class="History">
              <li class="left-column">历史记录</li>
              <li class="right-column">了解宝宝身体情况 &emsp13;></li>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="1-3岁">
        <zerooneyearoldchart></zerooneyearoldchart>
        <div class="box">
          <div class="topbox">
            <div style="display: flex">
              <li class="left-column">9天</li>
              <li class="right-column">标准身高:47.6cm~54.8cm</li>
            </div>
            <p style="margin-left: 10px">身高偏矮:注意补充营养</p>
          </div>
          <div class="History">
            <li class="left-column">历史记录</li>
            <li class="right-column">了解宝宝身体情况 &emsp13;></li>
          </div>
        </div>
      </van-tab>
      <van-tab title="3-7岁">
        <theresevenyearoldchart></theresevenyearoldchart>
        <div class="box">
          <div class="topbox">
            <div style="display: flex">
              <li class="left-column">9天</li>
              <li class="right-column">标准身高:47.6cm~54.8cm</li>
            </div>
            <p style="margin-left: 10px">身高偏矮:注意补充营养</p>
          </div>
          <div class="History">
            <li class="left-column">历史记录</li>
            <li class="right-column">了解宝宝身体情况 &emsp13;></li>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import theresevenyearoldchart from '@/compentents/chart/theresevenyearoldchart/index.vue'
import Chartsfor1_2yearsold from '@/compentents/chart/Chartsfor1_2yearsold/index.vue'
import zerooneyearoldchart from '@/compentents/chart/zerooneyearoldchart/index.vue'
const active = ref(0)
const router = useRouter()
const onClickLeft = () => {
  router.go(-1)
}
const list = ref([{ title: '身高曲线' }, { title: '体重曲线' }])
const currentStep = ref(0)
function onChange(index) {
  currentStep.value = index
}
</script>
